<template>
	<page>
		<block v-for="(allItem,index) in workerAllCat" >
			<view class='weui-cells__title red-color'>{{allItem.category.name}}</view>
			<view class='weui-cells weui-cells_after-title'>
				<view class="weui-cell">
					<view class="weui-cell__bd  workers-type-wrap">
						<view v-for="(item,index) in allItem.category.children" class='workers-type dp-flex-xy-center' :data-id="item.category.id" :data-main-id="allItem.category.id"
						 :data-money="item.category.money" :data-name="item.category.name" @tap='chooseDetailWorkerTap' :class="chooseDetailWorker == item.category.id ? 'workers-type-choose' :''">
							{{item.category.name}}
						</view>
					</view>
					<view class='weui-cell__ft'></view>
				</view>
			</view>
		</block>
		<view class='btn-wrap'>
			<button class="weui-btn mini-btn cancel-btn dp-flex-xy-center" @tap='handleCancelTap'>取消选择</button>
			<button class="weui-btn mini-btn confirm-btn dp-flex-xy-center" type="warn" @tap='handleConfirmTap'>确认选择</button>
			<view class='pb-30'></view>
		</view>
	</page>
</template>

<script>
	import app from '@/App.vue';
	import {
		GYZJMODEL as gyzjModel
	} from '@/utils/gyzjModel.js'
	export default {
		onLoad: function(options) {
			let cat = options.cat;
			this.cat = cat;
			this.getWorkerCategory();
		},
		data() {
			return {
				cat: '', // 主工种或次工种选择
				chooseDetailWorker: '', // 选择工种二级类别ID
				chooseDetailWorkerName: '', // 选择的工种的名称
				workerAllCat: null, // 工种分类
				chooseDetailMainWorkerId:''
			}
		},
		methods: {
			// 获取工种
			getWorkerCategory: function() {
				gyzjModel.prototype.getWorkerCategory().then(data => {
					switch (data.code) {
						case 1:
							data = data.data;
							this.workerAllCat = data;
							break;
						default:
							break;
					}
				});
			},
			// 具体工种类型选择
			chooseDetailWorkerTap: function(e) {
				let chooseDetailWorker = e.currentTarget.dataset.id;
				let chooseDetailWorkerName = e.currentTarget.dataset.name;
				let chooseDetailMainWorkerId = e.currentTarget.dataset.mainId;
				// let integrityAmount = e.currentTarget.dataset.money; // 选择工种所需支付的诚信金
				this.chooseDetailWorker = chooseDetailWorker;
				this.chooseDetailWorkerName = chooseDetailWorkerName;
				this.chooseDetailMainWorkerId=chooseDetailMainWorkerId;
			},
			/*取消选择*/
			handleCancelTap: function() {
				uni.navigateBack({})
			},
			
			/*确认选择*/
			 handleConfirmTap: function () {
				var arr = this.main_getGlobal();
			    let pages = getCurrentPages(), currpage = pages[pages.length - 1],prevPage = pages[pages.length - 2];
				console.log('所有的pages',pages);
				console.log('当前的pages',currpage);
				console.log('上一页的pages',prevPage);
			    let choosedWorkerId = this.chooseDetailWorker;
			    let choosedWorkerName = this.chooseDetailWorkerName;
				let chooseDetailMainWorkerId = this.chooseDetailMainWorkerId;
			    if (!this.chooseDetailWorker) {
			      uni.showModal({
			        title: '选择错误',
			        content: '您当前没有选择任何工种，请重新选择',
			        confirmColor: '#f94c48',
			        showCancel: false,
			        success: (res) => {
			        }
			      })
			      return
			    }
			
			    let postData = {};
				/*个人信息主工种*/
			    if (this.cat === '主') {
			console.log('主',prevPage.$vm.choosedMainWorkerId);
			console.log('主',prevPage.$vm.choosedMainWorkerName);
			      prevPage.$vm.choosedMainWorkerId=choosedWorkerId;
				  prevPage.$vm.choosedMainWorkerName=choosedWorkerName;
			      postData = {
			        work_category_id: choosedWorkerId
			      };
			      prevPage.$vm.updataUserInfo(arr.token, postData,arr.type);
			      uni.navigateBack({})
				  /*个人信息次工种*/
			    } else if (this.cat === '次') {
			console.log('次',prevPage.$vm);
			console.log('次',prevPage.$vm.choosedMainWorkerName);
					prevPage.$vm.choosedSubWorkerId=choosedWorkerId;
					prevPage.$vm.choosedSubWorkerName=choosedWorkerName;
		
			      postData = {
			        secondary_work_category_id: choosedWorkerId
			      };
			      prevPage.$vm.updataUserInfo(arr.token, postData,arr.type);
			      uni.navigateBack({})
				  /*店铺工种选择*/
			    }else if(this.cat==='send'){
					console.log('发送');
					prevPage.$vm.chooseMainWorker= chooseDetailMainWorkerId;
					prevPage.$vm.chooseDetailWorker= choosedWorkerId;
					prevPage.$vm.workerName= choosedWorkerName;
					uni.navigateBack({});
				 /*主页筛选工种*/
				}else if(this.cat==='indexBirth'){
					console.log('发送');
					prevPage.$vm.work_category_id= choosedWorkerId;
					prevPage.$vm.workerName= choosedWorkerName;
					prevPage.$vm.workerFilter();
					  if (!uni.getStorageSync('index-worker-filter')) {
						// event.emit('afterFilter');
						uni.setStorageSync('index-worker-filter', true);
					  }
					  uni.navigateBack({});
				}
			  },
		}
	}
</script>

<style>
	@import url("../../../static/style/app.css");

	.cat-item {
		flex: 1;
		padding: 20upx 0;
		text-align: center;
		border-bottom: 2px solid transparent;
	}

	button[type=warn] {
		color: #FFFFFF;
		background-color: #E64340;
	}
	.active {
		border-bottom: 2px solid #f94c48;
	}

	/* 工种选择 */
	.workers-type-wrap {
		display: flex;
		flex-wrap: wrap;
	}

	.worker-type-radio {
		margin-left: 10upx;
	}

	.workers-type {
		width: 31%;
		box-sizing: border-box;
		padding: 20upx 20upx;
		color: #666;
		border: 1px solid #ccc;
		border-radius: 5px;
		margin: 0 1.167%;
		margin-bottom: 20upx;
		text-align: center;
		font-size: 28upx;
	}

	.workers-type-choose {
		background-color: #f94c48;
		color: #fff;
		border: 1px solid #f94c48;
	}

	.btn-wrap {
		display: flex;
		position: fixed;
		bottom: 0;
		left: 0;
		z-index: 10;
		width: 100%;
		height: 100upx;
	}

	.btn-wrap button {
		border-radius: 0;
	}

	.btn-wrap button::after {
		border: none;
	}

	.btn-wrap .confirm-btn {
		flex: 2;
		margin-top: 0;
	}

	.btn-wrap .cancel-btn {
		flex: 1;
		margin-top: 0;
	}

	.pb-30 {
		padding-bottom: 30upx;
	}

	.weui-cells__title {
		text-align: center;
		font-size: 20px;
	}

	page {
		padding-bottom: 120upx;
	}
</style>
